<template>
	<a-spin :spinning="uploadLoading">
		<a-upload-dragger style="padding: 4em 0" :show-upload-list="false" :custom-request="customRequest">
			<p class="ant-upload-drag-icon">
				<inbox-outlined></inbox-outlined>
			</p>
			<p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
			<p class="ant-upload-hint">仅支持单个上传</p>
			<p class="ant-upload-hint">核查结果将在以下表格呈现</p>
		</a-upload-dragger>
	</a-spin>
	<a-card title="核查结果" class="mt-4">
		<template #extra>
			<a href="#">下载</a>
		</template>
		<a-table bordered class="ant-table-striped" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)" :columns="columns" :data-source="data">

		</a-table>
	</a-card>
</template>

<script setup name="PosPromoteCheck">
	import fileApi from "@/api/dev/fileApi";

	const uploadLoading = ref(false)

	const data = [
		{
			goodCode: '0014773'
		},
		{
			goodCode: '1232131'
		}
	]

	const columns = [
		{
			title: '商品编码',
			dataIndex: 'goodCode',
			width: 120
		},
		{
			title: '商品名称',
			dataIndex: 'goodName',
			width: 300
		},
		{
			title: '促销活动',
			dataIndex: 'promoteInfo'
		},
		{
			title: '是否促销',
			dataIndex: 'isPromote',
			align: 'center',
			width: 140,
			filters: [{
				text: '是',
				value: '1',
			}, {
				text: '否',
				value: '0',
			}],
		}
	]

	// 上传本地文件
	const customRequest = (data) => {
		uploadLoading.value = true
		const fileData = new FormData()
		fileData.append('file', data.file)
		fileApi
			.fileUploadLocalReturnUrl(fileData)
			.then(() => {
				emit('successful')
			})
			.finally(() => {
				uploadLoading.value = false
			})
	}

</script>

<style scoped>
.ant-table-striped :deep(.table-striped) td {
	background-color: #fafafa;
}
</style>
